<template>
  <div>
    <el-dialog
      title="选择拼购商品"
      :append-to-body="true"
      @close="closeDio"
      :visible.sync="dialogTableVisible"
      width="800px"
      style="padding:20px"
    >
      <el-table
        v-if="course_list.data"
        ref="multipleTable"
        :data="course_list.data"
        stripe
        header-row-class-name="head_color"
        tooltip-effect="dark"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="图片" min-width="120">
          <template slot-scope="scope">
            <img :src="$fnc.getImgUrl(scope.row.piclink)" alt style="width:70%;border-radius:5px" />
          </template>
        </el-table-column>
        <el-table-column label="标题" min-width="200">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column label="价格" min-width="200">
          <template slot-scope="scope">{{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="操作" min-width="150">
          <template slot-scope="scope">
            <el-button :loading="$store.state.isLoading" size="mini" @click="addShops(scope.row)">添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="table_bottom">
          <el-col :span="24" class="tr">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage1"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="course_list.all_num"
            ></el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "xz_lesson",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    showType: {
      type: String,
      default: "table"
    }
  },
  data() {
    return {
      course_list: [],
      currentPage1: 1,
      pageSize: 5,
      dialogTableVisible: this.show,
      loading: false
    };
  },
  created() {},
  methods: {
    getProductAllList(page, page_size) {
      this.loading = true;
      var params = {};
      params.page = page;
      params.page_size = page_size;
      params.types = 19;
      this.$api.getGroupbuy.getProductList(params).then(res => {
        if (res.data.code == 200) {
          this.course_list = res.data.result;
          this.loading = false;
        } else {
          this.$fnc.alertError(res.data.result);
          this.loading = false;
        }
      });
    },
    addShops(row) {
      this.$emit("sendShop", row);
      this.dialogTableVisible = false;
    },
    handleSizeChange(val) {
      this.getProductAllList("", val);

      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.getProductAllList(val, this.pageSize);
    },
    closeDio() {
      this.$emit("isshow", false);
      this.dialogTableVisible = false;
    }
  },
  watch: {
    show(val1, val2) {
      if (val1) {
        this.getProductAllList(1, this.pageSize);
      }
      if (val1 == val2) {
        return;
      }
      this.dialogTableVisible = val1;
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.list_ul {
  height: 610px;
  overflow: auto;
}
.list_card {
  padding: 15px;
  cursor: pointer;
}
.card_list {
  line-height: 2;
  padding: 5px 0 0 5px;
}
.price_card {
  color: red;
}
</style>
